<template>
  <div style="padding: 10px">
    <el-card>
      <forms :search="search"></forms>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert
        style="margin-bottom: 15px"
        :closable="false"
        :title="choiceList.counts"
        type="info"
        show-icon
      >
      </el-alert>
      <el-table :data="choiceList.items" algin="left" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column prop="" label="题干" width="280">
          <template #default="scope"
            ><span v-html="scope.row.question"></span
          ></template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="150">
          <template #default="scope">{{
            scope.row.publishState === 1 ? "待发布" : "已下架"
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <div class="msg">
              <el-button
              @click="view(scope.row)"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button
                @click="open(scope.row.id)"
                type="text"
                size="small"
                :disabled="scope.row.chkState !== '待审核'"
                >审核</el-button
              >
              <el-button type="text" size="small" @click="$router.push(`new?id=${scope.row.id}`)">修改</el-button>
              <el-button type="text" size="small">下架</el-button>
              <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="5"
          layout=" prev, pager, next, sizes, jumper"
          :background="true"
          :page-count="choiceList.pages"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisible"
      width="21%"
      :before-close="auditClose"
    >
    <el-radio v-model="audit.chkState" label="1">通过</el-radio>
  <el-radio v-model="audit.chkState" label="2">拒绝</el-radio>
  <el-input
  style="margin-top: 25px"
  type="textarea"
  :rows="2"
  placeholder="请输入审核意见"
  size="mini"
  v-model="audit.chkRemarks">
</el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog @close="dialogClose" title="题目预览" :visible.sync="dialogVisible1" width="47%">
      <div style="display: flex; flex-wrap: wrap">
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【题型】：{{ msgList.questionType }}题</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【编号】：{{ msgList.id }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【难度】：{{ msgList.difficulty }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【标签】：{{ msgList.tags }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【学科】：{{ msgList.subjectName }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【目录】：{{ msgList.directoryName }}</span
        >
        <span style="width: 25%; height: 36px; line-height: 36px"
          >【方向】：{{ msgList.direction }}</span
        >
      </div>
      <hr />
      <span>【题干】：</span><br />
      <div style="color: blue" v-html="msgList.question"></div>
      <span v-show="msgList.questionType !== '简答'"
        >{{ msgList.questionType }}题 选项： （以下选中的选项为正确答案）</span
      >
      <div v-if="msgList.questionType === '多选'">
        <div
          style="margin: 15px 0"
          v-for="item in msgList.options"
          :key="item.id"
        >
          <el-checkbox
            :value="item.isRight === 1"
            :checked="item.isRight === 1"
            >{{ item.title }}</el-checkbox
          ><br />
        </div>
      </div>
      <div v-if="msgList.questionType === '单选'">
        <div
          style="margin: 15px 0"
          v-for="item in msgList.options"
          :key="item.id"
        >
          <el-radio :value="radio" :label="item.isRight">{{
            item.title
          }}</el-radio
          ><br />
        </div>
      </div>
      <hr />
      <span>【参考答案】：</span>
      <el-button size="small" type="danger" @click="isShow = true"
        >视频答案预览</el-button
      >
      <br />
      <video width="400" height="300" controls v-show="isShow">
        <source :src="msgList.videoURL" type="video/mp4" />
      </video>
      <hr />
      <div
        style="display: flex"
        v-html="'<p>【答案解析】：</p>' + msgList.answer"
      ></div>
      <hr />
      <div>【题目备注】：{{ msgList.remarks }}</div>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: block; text-align: center"
      >
        <el-button type="primary" @click="dialogVisible1 = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import forms from './components/forms.vue'
import { choice, choiceCheck, detail, remove } from '@/api/hmmm/questions'
import moment from 'moment'
export default {
  components: { forms },
  data () {
    return {
      radio: 1,
      isShow: false,
      msgList: {},
      dialogVisible1: false,
      audit: {
        chkRemarks: '',
        chkState: '1'
      },
      dialogVisible: false,
      activeName: 'first',
      list: {
        page: 1,
        pagesize: 5
      },
      lists: {},
      list1: {
        page: 1,
        pagesize: 5
      },
      choiceList: {}
    }
  },
  methods: {
    handleClick (tab, event) {
      if (this.activeName === 'first') {
        this.list = {}
        this.list.page = 1
        this.list.pagesize = 5
        this.getList(this.list)
      } else if (this.activeName === 'second') {
        this.list = {}
        this.list.page = 1
        this.list.pagesize = 5
        this.list.chkState = 0
        this.getList(this.list)
      } else if (this.activeName === 'second') {
        this.list = {}
        this.list.page = 1
        this.list.pagesize = 5
        this.list.chkState = 1
        this.getList(this.list)
      } else {
        this.list = {}
        this.list.page = 1
        this.list.pagesize = 5
        this.list.chkState = 2
        this.getList(this.list)
      }
    },
    async del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        await this.getList(this.list1)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {})
    },
    dialogClose () {
      this.msgList = {}
    },
    async view (row) {
      const { data: res } = await detail(row)
      this.msgList = { ...res }
      if (this.msgList.questionType === '1') {
        this.msgList.questionType = '单选'
      } else if (this.msgList.questionType === '2') {
        this.msgList.questionType = '多选'
      } else {
        this.msgList.questionType = '简答'
      }
      if (this.msgList.difficulty === '1') {
        this.msgList.difficulty = '简单'
      } else if (this.msgList.difficulty === '2') {
        this.msgList.difficulty = '一般'
      } else {
        this.msgList.difficulty = '困难'
      }
      this.dialogVisible1 = true
    },
    async submit () {
      if (this.audit.chkRemarks === '') {
        this.$message.warning('请输入审核意见')
      } else {
        this.audit.chkState = Number(this.audit.chkState)
        choiceCheck(this.audit)
        this.$message.success('操作成功！')
        this.audit.chkRemarks = ''
        this.audit.chkState = '1'
        this.audit.id = ''
        this.lists.page = this.list.page
        this.lists.pagesize = this.list.pagesize
        this.getList(this.lists)
        this.dialogVisible = false
      }
    },
    cancel () {
      this.audit.chkRemarks = ''
      this.audit.chkState = '1'
      this.audit.id = ''
      this.dialogVisible = false
    },
    async open (id) {
      this.audit.id = id
      this.audit.chkState = '1'
      this.audit.chkRemarks = ''
      this.dialogVisible = true
    },
    auditClose () {
      this.audit.chkRemarks = ''
      this.audit.chkState = '1'
      this.audit.id = ''
      this.dialogVisible = false
    },
    async search (val) {
      val.page = 1
      val.pagesize = 5
      this.list = { ...val }
      this.list.subjectID = this.list.subjects
      this.list.province = this.list.provinces
      this.list.city = this.list.citys
      this.list.catalogID = this.list.catalog
      delete this.list.subjects
      delete this.list.provinces
      delete this.list.citys
      delete this.list.catalog
      this.getList(this.list)
    },
    async getList (list) {
      const { data: res } = await choice(list)
      this.choiceList = res
      this.choiceList.items.forEach((item) => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          item.questionType = '简答'
        }
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          item.difficulty = '困难'
        }
        if (item.chkState === 0) {
          item.chkState = '待审核'
        } else if (item.chkState === 1) {
          item.chkState = '已审核'
        } else {
          item.chkState = '已拒绝'
        }
      })
      this.choiceList.counts = `数据一共 ${this.choiceList.counts} 条`
    },
    async handleSizeChange (e) {
      this.list.pagesize = e
      this.getList(this.list)
    },
    async handleCurrentChange (e) {
      this.list.page = e
      this.getList(this.list)
    }
  },
  created () {
    this.getList(this.list)
  }
}
</script>

<style scoped lang="scss">
::v-deep .has-gutter {
  border: 10px solid #ccc;
  th {
    background-color: #fafafa;
  }
}
::v-deep .el-table__header {
  border-bottom: 1px solid #e8e8e8;
}
.bottom {
  width: 100%;
  text-align: right;
  margin-top: 20px;
}
.msg {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
</style>
